<template>
    <div class="login-container">
      <div v-if="!showSelectionPanel" class="login-form">
        <h1>后台管理系统登录</h1>
        
        <!-- 账号输入框 -->
        <div class="form-group">
          <label for="username">账号</label>
          <input 
            type="text" 
            id="username" 
            v-model="loginData.username" 
            placeholder="请输入管理员账号"
          />
        </div>
  
        <!-- 密码输入框 -->
        <div class="form-group">
          <label for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="loginData.password" 
            placeholder="请输入密码"
            @keyup.enter="handleLogin" 
          />
        </div>
        
        <!-- 登录按钮 -->
        <button @click="handleLogin" :disabled="isLoading">
          {{ isLoading ? '登录中...' : '登 录' }}
        </button>
  
        <!-- 消息提示区域 -->
        <div v-if="message" :class="['message', messageType]">
          {{ message }}
        </div>
      </div>

      <!-- 选择面板 -->
      <div v-if="showSelectionPanel" class="selection-panel">
        <div class="selection-buttons">
          <button @click="navigateTo('StudentList')" class="selection-button student-button">学生信息页面</button>
          <button @click="navigateTo('TeacherList')" class="selection-button teacher-button">教师信息页面</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // 1. 导入 axios
  import axios from 'axios';
  
  export default {
    name: 'AdminLogin',
    props: {
      showSelectionPanelDirectly: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 2. 使用一个对象来绑定表单数据
        loginData: {
          username: '',
          password: ''
        },
        isLoading: false, // 用于控制按钮状态和显示"登录中..."
        message: '',      // 用于显示提示消息
        messageType: '',  // 用于控制消息样式 ('success' 或 'error')
        showSelectionPanel: false // 控制选择面板的显示
      };
    },
    created() {
      // 检查是否需要直接显示选择面板
      if (this.showSelectionPanelDirectly) {
        this.showSelectionPanel = true;
      }
    },
    methods: {
      // 3. 定义处理登录点击事件的方法
      async handleLogin() {
        // 简单的前端校验
        if (!this.loginData.username || !this.loginData.password) {
          this.showMessage('账号和密码不能为空！', 'error');
          return;
        }
  
        this.isLoading = true;
        this.message = ''; // 清空之前的消息
  
        try {
          // 4. 使用 axios 发送 POST 请求到后端的 /admin/login 接口
          // 注意：Spring Boot 的 @RequestParam 默认期望的是 form-data 格式的数据
          const params = new URLSearchParams();
          params.append('username', this.loginData.username);
          params.append('password', this.loginData.password);
  
          const response = await axios.post('http://localhost:8083/admin/login', params, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          });
  
          // 5. 根据后端返回的 ResponseResult 进行判断
          if (response.data && response.data.code === 200 && response.data.ok === true) {
            // 登录成功
            this.showMessage('登录成功！', 'success');
            
            // 直接跳转到表格选择器组件
            this.$router.push('/tables').catch(err => {
              if (err.name !== 'NavigationDuplicated') {
                console.error('路由导航错误:', err);
              }
            });
          } else {
            // 登录失败 (后端验证失败)
            this.showMessage(response.data.msg || '用户名或密码错误！', 'error');
          }
        } catch (error) {
          // 网络错误或后端服务未开启等
          console.error('登录请求失败:', error);
          this.showMessage('登录请求失败，请检查网络或联系管理员。', 'error');
        } finally {
          this.isLoading = false; // 无论成功失败，都结束加载状态
        }
      },
      // 一个用于显示消息的辅助方法
      showMessage(msg, type) {
        this.message = msg;
        this.messageType = type;
      },
      // 导航到指定页面
      navigateTo() {
        // 使用Vue Router进行页面跳转到表格选择器组件
        this.$router.push('/tables').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error('路由导航错误:', err);
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
  }
  
  .login-form, .selection-panel {
    width: 360px;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  h1, h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
  }
  
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
  }
  
  input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 保证padding不会撑大宽度 */
    font-size: 16px;
  }
  
  button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  
  .selection-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .selection-button {
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .student-button {
    background-color: #28a745;
  }
  
  .student-button:hover {
    background-color: #218838;
  }
  
  .teacher-button {
    background-color: #17a2b8;
  }
  
  .teacher-button:hover {
    background-color: #138496;
  }
  
  .message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
  }
  
  .message.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
  }
  
  .message.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
  }
  </style>